<template>
  <div>
    <Myheader/>
    <div v-if="cartList?.length" class="cart-container">
      <el-table
        ref="multipleTable"
        :data="cartList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        highlight-current-row
        @select="handleChange"
        @select-all="handleChangeAll"
        @selection-change="handleSelectionChange"
       >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="商品"
          width="120">
          <template slot-scope="scope">
            <img :src="scope.row.img_small_logo" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120">
        </el-table-column>
        <el-table-column
          prop="title"
          label="描述"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
          label="总价"
          width="120">
          <template slot-scope="prop">
            {{ prop.row.price * prop.row.cart_number.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          width="160">
          <template slot-scope="prop">
            <el-input-number v-model="prop.row.cart_number"
              @change="changeGoodsNumber(prop.row)" :min="1" :max="prop.row.goods_number" label="描述文字"
              size="mini"
            >
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="prop">
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="handleDel(prop.row.goods_id)"
            >
              <el-button type="danger" slot="reference">删除</el-button>
            </el-popconfirm>            
          </template>
        </el-table-column>
      </el-table>
      <white-space/>
      <div class="control">
        <div class="text">
          <div class="all-price">

          </div>
        </div>
        <el-button type="info" @click="handleClear">物理清空购物车</el-button>
        <el-button type="primary" @click="handlePay">金钱清空购物车</el-button>
        <el-button type="warning" @click="handleClearSelected">选择清空购物车</el-button>
      </div>
    </div>
    <div class="empty" v-else>
      <el-empty description="暂无商品， 购物车是空的" 
        :image-size="600"
      >
      </el-empty>
    </div>
  </div>
</template>

<script>
import {
  getCartList,
  removeItemCart,
  removeSelectedCart,
  clearCart,
  changeSelectCart,
  changeSelectAllCart,
  changeNumberCart,
  doPay,
} from '@/service/shop';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      cartList: [],
      multipleSelection: [],
      goodsNum: 0,
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
  },
  methods: {
    async handleClearSelected() {
      const res = await removeSelectedCart(this.userInfo.id);
      console.log(res);
      if (res.code !== 1) return;
      this.getCartListData();
    },
    async changeGoodsNumber(item) {
      console.log(item);
      const res = await changeNumberCart(this.userInfo.id, item.goods_id, item.cart_number)
      if (res !== 1) return;
    },
    async handleDel(goodsId) {
      const res = await removeItemCart(this.userInfo.id, goodsId);;
      if (res.code !== 1) return;
      this.getCartListData();
    },
    async getCartListData() {
      const res = await getCartList(this.userInfo.id);;
      const { code,  cart } = res || {};
      if (code !== 1) return;
      this.cartList = cart || [];
      // this.multipleSelection = cart.map((item) => item)
    },
    async changeSelectCartData() {
      // const res = await changeSelectCart();
    },
    async handleChange(rows, row) {

      await changeSelectCart(this.userInfo.id, row.goods_id);
      // this.$refs.multipleTable.toggleRowSelection(row, row.is_select);
    },
    async handleChangeAll(rows) {
      const isAllSelected = rows.every((item) => item.is_select === true)
      if (isAllSelected) {
        await changeSelectAllCart(this.userInfo.id, 0);
        console.log('全选1')
      } else {
        await changeSelectAllCart(this.userInfo.id, 1);
        console.log('全选2')
      }
      console.log(isAllSelected)
      console.log('handleChangeAll', rows)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log('handleSelectionChange', val)
    },
    async handleClear() {
      const res = await clearCart(this.userInfo.id);
      const { code, message } = res || {};
      if (code !== 1) return;
      this.$message.success({
        message: message,
        duration: 1500,
        showClose: true,
      });
      this.getCartListData();
    },
    async handlePay() {
      const res = await doPay(this.userInfo.id);
    }
  },
  mounted() {
    this.getCartListData();
    // this.$refs.multipleTable.toggleAllSelection();
    this.multipleSelection = this.cartList.filter((item) => {
      return item.is_select === true;
    });
    console.log(this.multipleSelection)
  },
  watch: {
    cartList: {
      deep: true,
      immediate: true,
      handler(val) {
        console.log(val);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cart-container {
  margin: 100px auto;
  width: 80vw;
  .el-table {
   img {
    display: block;
    margin: 0 auto;
    width: 80px;
    border-radius: 10px;
   }
  }
  .empty {
    .el-empty{
      .el-empty__bottom {
        i {
          font-size: 100px !important;
          color: pink;
        }
      }     
    }   
  }
}
</style>
